<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVG</title>
  </head>
  <body>
    <svg width="1200" height="500">
      <!-- 直线：   x1 y1 是第一个点坐标
             x2 y2 是第二个点坐标
             storke 绘制线段的样式
       -->
      <line x1="100" y1="100" x2="200" y2="200" stroke="pink" />
      <!-- 折线 points 依次传入点坐标，即可绘制 -->
      <polyline
        points="300 100,200 300,300 400,150 300"
        fill-opacity="0"
        stroke="pink"
      />
      <!-- 矩形   x y 左上角点坐标  width 宽度   height 高度-->
      <rect
        x="200"
        y="200"
        width="300"
        height="200"
        stroke="#eee"
        fill-opacity="0"
      ></rect>
      <!-- 圆   cx cy 圆心点坐标
           r 半径
           style 样式-->
      <circle cx="50" cy="50" r="50" style="stroke: blue; fill: none"></circle>
      <!-- 多边形  cx cy 圆心点坐标  rx x轴半径  ry y轴半径 -->
      <ellipse cx="150" cy="150" ry="50" rx="50" style="fill: black"></ellipse>
      <!-- 任意图形  M 移动到初始位置   L 画线    Z 将结束和开始点闭合-->
      <path
        d="
      M 10 10
      L 40 20
      L 50 50
      L 100 100
      Z
      "
        stroke="pink"
        fill-opacity="0"
      ></path>
    </svg>
  </body>
</html>
